<template>
  <div class="project-detail-container">
    <!-- 顶部导航 -->
    <div class="header">
      <div class="header-content">
        <div class="back-button" @click="goBack">
          <van-icon name="arrow-left" size="20" />
        </div>
        <h1 class="header-title">项目详情</h1>
        <!-- <div class="share-button" @click="shareProject">
          <van-icon name="share-o" size="20" />
        </div> -->
      </div>
    </div>

    <!-- 项目基本信息 -->
    <div class="project-info-card">
      <h2 class="project-title">{{ project.name }}</h2>

      <div class="project-progress-container">
        <div class="progress-header">
          <span class="progress-label">募集进度</span>
          <span class="progress-value">{{ project.progress }}%</span>
        </div>
        <van-progress :percentage="project.progress" :stroke-width="4" color="#1989fa" />
      </div>

      <div class="project-stats">
        <div class="stats-item">
          <div class="stats-value">{{ project.current }}</div>
          <div class="stats-label">已筹金额 ({{project.currency }})</div>
        </div>
        <div class="stats-item">
          <div class="stats-value">{{ project.target }}</div>
          <div class="stats-label">目标金额 ({{project.currency }})</div>
        </div>
        <div class="stats-item">
          <div class="stats-value">{{ project.participants }}</div>
          <div class="stats-label">参与人数</div>
        </div>
        <div class="stats-item">
          <div class="stats-value" v-if="project.remainingDays > 0">{{ project.remainingDays }}</div>
          <div class="stats-value" v-else>--</div>
          <div class="stats-label">剩余天数</div>
        </div>
      </div>
    </div>

    <!-- 项目图片轮播 -->
    <div class="project-images">
      <van-swipe class="image-swiper" :autoplay="3000" indicator-color="#1989fa">
        <van-swipe-item v-for="(image, index) in project.images" :key="index">
          <img :src="image" :alt="`${project.name} - 图片 ${index + 1}`" class="swiper-image" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 项目详情标签页 -->
    <van-tabs v-model:active="activeTab" sticky swipeable animated>
      <van-tab title="项目介绍">
        <div class="tab-content">
          <div class="project-description">
            <div v-html="project.description" class="rich-text-content"></div>
          </div>
        </div>
      </van-tab>

      <van-tab title="投资回报" v-if="project.proType == '1'">
        <div class="tab-content">
          <div class="returns-info">
            <h3 class="section-title">预期收益</h3>
            <div class="returns-card">
              <div class="returns-header">
                <span class="returns-label">预计年化收益率</span>
                <span class="returns-value">{{ project.expectedReturn }}%</span>
              </div>
              <div class="returns-details">
                <p>{{ project.returnDescription }}</p>
              </div>
            </div>

            <h3 class="section-title">收益分配</h3>
            <div class="distribution-info">
              <div class="distribution-item">
                <div class="distribution-header">
                  <span class="distribution-label">分配方式</span>
                  <span class="distribution-value">{{ project.distributionMethod }}</span>
                </div>
                <div class="distribution-desc">{{ project.distributionDescription }}</div>
              </div>

              <div class="distribution-item">
                <div class="distribution-header">
                  <span class="distribution-label">分配周期</span>
                  <span class="distribution-value">{{ project.distributionCycle }}</span>
                </div>
                <div class="distribution-desc">{{ project.cycleDescription }}</div>
              </div>
            </div>

            <h3 class="section-title">投资示例</h3>
            <div class="investment-example">
              <div class="example-card">
                <div class="example-header">投资 1,000 {{ project.currency }}</div>
                <div class="example-content">
                  <div class="example-item">
                    <span class="example-label">月收益约</span>
                    <span class="example-value">{{ (1000 * project.expectedReturn / 100 / 12).toFixed(2) }} {{ project.inComeIcon }}</span>
                  </div>
                  <div class="example-item">
                    <span class="example-label">年收益约</span>
                    <span class="example-value">{{ (1000 * project.expectedReturn / 100).toFixed(2) }} {{ project.inComeIcon }}</span>
                  </div>
                </div>
              </div>

              <div class="example-card">
                <div class="example-header">投资 10,000 {{ project.currency }}</div>
                <div class="example-content">
                  <div class="example-item">
                    <span class="example-label">月收益约</span>
                    <span class="example-value">{{ (10000 * project.expectedReturn / 100 / 12).toFixed(2) }} {{ project.inComeIcon }}</span>
                  </div>
                  <div class="example-item">
                    <span class="example-label">年收益约</span>
                    <span class="example-value">{{ (10000 * project.expectedReturn / 100).toFixed(2) }} {{ project.inComeIcon }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>

      <van-tab title="风险提示">
        <div class="tab-content">
          <div class="risk-info">
            <h3 class="section-title">风险因素</h3>
            <div class="risk-list">
              <div v-for="(risk, index) in project.risks" :key="index" class="risk-item">
                <div class="risk-icon">
                  <van-icon name="warning-o" size="20" color="#f59e0b" />
                </div>
                <div class="risk-content">
                  <h4 class="risk-title">{{ risk.title }}</h4>
                  <p class="risk-desc">{{ risk.description }}</p>
                </div>
              </div>
            </div>

            <h3 class="section-title">风险控制措施</h3>
            <div class="measures-list">
              <div v-for="(measure, index) in project.riskMeasures" :key="index" class="measure-item">
                <div class="measure-icon">
                  <van-icon name="shield-o" size="20" color="#10b981" />
                </div>
                <div class="measure-content">
                  <h4 class="measure-title">{{ measure.title }}</h4>
                  <p class="measure-desc">{{ measure.description }}</p>
                </div>
              </div>
            </div>

            <div class="risk-disclaimer">
              <h3 class="disclaimer-title">免责声明</h3>
              <p class="disclaimer-content">{{ project.disclaimer }}</p>
            </div>
          </div>
        </div>
      </van-tab>

      <van-tab title="参与记录">
        <div class="tab-content">
          <div class="participants-list">
            <div v-for="(participant, index) in project.participantRecords" :key="index" class="participant-item">
              <div class="participant-info">
                <div class="participant-name">{{ formatAddress(participant.address) }}</div>
                <div class="participant-name">{{ participant.name }}</div>
                <div class="participant-time">{{ participant.time }}</div>
              </div>
              <div class="participant-amount">{{ participant.amount }} {{ participant.currency }}</div>
            </div>

            <van-empty v-if="project.participantRecords.length === 0" description="暂无参与记录" />

            <!-- 加载状态 -->
            <div class="load-more-status" v-if="project.participantRecords.length > 0">
              <p v-if="participantRecords.loading" class="loading-text">加载中...</p>
              <p v-else-if="participantRecords.error" class="error-text" @click="loadMoreRecords">加载失败，点击重试</p>
              <p v-else-if="participantRecords.finished" class="finished-text">没有更多了</p>
              <p v-else class="more-text" @click="loadMoreRecords">点击加载更多</p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 底部操作按钮 -->
    <div class="action-bar">
      <div class="action-bar-content">
        <div class="action-info">
          <div class="min-amount">最低参与: <span>{{ project.minInvestment }} {{ project.currency }}</span></div>
          <div class="deadline">截止日期: {{ project.deadline }}</div>
        </div>
        <van-button type="primary" block class="participate-button" @click="showParticipatePopup">
          立即参与
        </van-button>
      </div>
    </div>

    <!-- 参与弹窗 -->
    <van-popup v-model:show="showParticipate" position="bottom" round closeable
      :style="{ height: '60%', maxWidth: '800px', left: '50%', transform: 'translateX(-50%)' }">
      <div class="participate-popup">
        <div class="popup-header">
          <h3 class="popup-title">参与项目</h3>
        </div>

        <div class="popup-content">
          <div class="project-brief">
            <h4 class="brief-title">{{ project.name }}</h4>
            <div class="brief-info">
              <span v-if="project.proType === '1'">预期年化: {{ project.expectedReturn }}%</span>
              <span v-if="project.proType === '2'">质押活动</span>
              <span v-if="project.proType === '3'">私募活动</span>
              <span>周期: {{ project.term }}天</span>
            </div>
          </div>

          <div class="amount-input">
            <div class="input-label">参与金额 ({{ project.currency }})</div>
            <div class="input-container">
              <van-field v-model="participateAmount" type="number" placeholder="请输入参与金额" :rules="[
                { required: true, message: '请输入参与金额' },
                { validator: validateAmount, message: `最低参与金额为 ${project.minInvestment} {{ project.currency }}` }
              ]" />
            </div>
            <div class="balance-info">
              <span>余额: {{ userBalance }} {{ project.currency }}</span>
              <span class="all-in" @click="useAllBalance">全部参与</span>
            </div>
          </div>

          <div class="agreement-check">
            <van-checkbox v-model="agreeTerms">
              我已阅读并同意<span class="agreement-link" @click.stop="showAgreement">《项目参与协议》</span>
            </van-checkbox>
          </div>
        </div>

        <div class="popup-footer">
          <van-button type="primary" block class="confirm-button" :disabled="!canParticipate"
            @click="confirmParticipate">
            确认参与
          </van-button>
        </div>
      </div>
    </van-popup>

    <!-- 协议弹窗 -->
    <van-popup v-model:show="showAgreementPopup" round closeable :style="{ width: '90%', height: '70%' }">
      <div class="agreement-popup">
        <div class="agreement-header">
          <h3 class="agreement-title">项目参与协议</h3>
        </div>

        <div class="agreement-content">
          <p>{{ project.agreement }}</p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive, nextTick, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast, showSuccessToast, showLoadingToast, closeToast } from 'vant'
import { getProjectDetail, joinProject, getParticipantRecords } from '@/api/project'
import { getUserWallet } from '@/api/user'
import { isLoggedIn } from '@/utils/auth/sessionManager'

const router = useRouter()
const route = useRoute()

// 标签页状态
const activeTab = ref(0)

// 弹窗状态
const showParticipate = ref(false)
const showAgreementPopup = ref(false)

// 参与表单
const participateAmount = ref('')
const agreeTerms = ref(false)

// 项目数据
const project = ref({
  id: '',
  name: '加载中...',
  description: '加载中...',
  progress: 0,
  target: '0',
  current: '0',
  currency: 'USDT',
  inComeIcon: 'USDT',
  participants: 0,
  remainingDays: 0,
  deadline: '',
  minInvestment: 100,
  expectedReturn: 0,
  term: '90',
  distributionMethod: '按持有比例',
  distributionCycle: '每日',
  distributionDescription: '根据投资者持有的项目份额按比例分配收益。',
  cycleDescription: '每天00:00:00开始结算昨日收益，当日06:00：00发放到账户余额。',
  returnDescription: '',
  background: '加载中...',
  images: [],
  //advantages: '',
  shareType:'0',
  roadmap: [],
  risks: [],
  riskMeasures: [],
  disclaimer: '',
  participantRecords: [],
  agreement: ''
})

// 用户余额
const userBalance = ref(0)

// 参与记录状态
const participantRecords = reactive({
  list: [],
  page: 1,
  size: 10,
  total: 0,
  loading: false,
  finished: false,
  error: false
})

// 计算属性
const canParticipate = computed(() => {
  return participateAmount.value &&
    parseFloat(participateAmount.value) >= project.value.minInvestment &&
    parseFloat(participateAmount.value) <= userBalance.value &&
    agreeTerms.value
})

// 验证金额
const validateAmount = (val) => {
  const amount = parseFloat(val)
  return amount >= project.value.minInvestment
}

// 处理富文本图片响应式
const processRichTextImages = () => {
  nextTick(() => {
    const richTextContainer = document.querySelector('.rich-text-content')
    if (richTextContainer) {
      const images = richTextContainer.querySelectorAll('img')
      
      images.forEach(img => {
        // 移除可能的内联样式中的固定宽高
        img.style.width = 'auto'
        img.style.height = 'auto'
        img.style.maxWidth = '100%'
        img.style.display = 'block'
        img.style.margin = '16px auto'
        
        // 添加加载错误处理
        img.onerror = function() {
          this.style.display = 'none'
        }
        
        // 添加加载完成处理
        img.onload = function() {
          // 如果图片原始宽度小于容器宽度，保持原始大小
          const containerWidth = richTextContainer.offsetWidth
          if (this.naturalWidth < containerWidth) {
            this.style.maxWidth = this.naturalWidth + 'px'
          }
        }
      })
      
      // 处理可能包含图片的其他元素
      const figures = richTextContainer.querySelectorAll('figure')
      figures.forEach(figure => {
        figure.style.maxWidth = '100%'
        figure.style.margin = '16px auto'
        figure.style.textAlign = 'center'
      })
    }
  })
}

// 监听项目描述变化，处理富文本图片
watch(() => project.value.description, () => {
  processRichTextImages()
}, { flush: 'post' })

// 生命周期钩子
onMounted(() => {
  const projectId = route.params.id
  loadProjectData(projectId)
})

// 加载项目数据
const loadProjectData = async (projectId) => {
  try {
    // 显示加载提示
    showLoadingToast({
      message: '加载中...',
      forbidClick: true,
      duration: 0
    })

    // 调用API获取项目详情
    const res = await getProjectDetail(projectId)

    // 清除加载提示
    closeToast()

    if (res && res.code === 0 && res.data) {
      // 处理项目数据
      const projectData = res.data


      // 格式化数据
      project.value = {
        ...projectData,
        // 确保数据格式正确
        shareType: projectData.shareType || '0',
        inComeIcon: projectData.inComeIcon || 'USDT',
        progress: projectData.progress || 0,
        target: projectData.target || '0',
        current: projectData.current || '0',
        currency: projectData.currency || 'USDT',
        participants: projectData.participants || 0,
        remainingDays: projectData.remainingDays || 0,
        minInvestment: projectData.minInvestment || 100,
        expectedReturn: projectData.earnings || 0,
        // 添加默认值
        term: projectData.lockDay || '90',
        distributionMethod: projectData.distributionMethod || '按持有比例',
        distributionCycle: projectData.distributionCycle || '每日',
        distributionDescription: projectData.distributionDescription || '根据投资者持有的项目份额按比例分配收益。',
        cycleDescription: projectData.cycleDescription || '每天00:00:00开始结算昨日收益，当日06:00:00发放到账户余额。',
        returnDescription:  `该项目预期年化收益率为${projectData.earnings || 0}%，实际收益可能因市场情况有所波动。`,
        background: projectData.background || projectData.description || '暂无详细介绍',
        images: projectData.image.split(',') || [],
        //advantages: projectData.advantages || [],
        //roadmap: projectData.roadmap || [],
        risks: [
          {
            title: '市场风险',
            description: '智能手表市场竞争激烈，可能影响销售表现。'
          },
          {
            title: '技术风险',
            description: '区块链技术仍在发展中，可能面临技术更新挑战。'
          },
          {
            title: '监管风险',
            description: '不同国家对区块链和NFT的监管政策可能影响产品销售。'
          }
        ],
        riskMeasures: projectData.riskMeasures || [],
        disclaimer: projectData.disclaimer || '投资有风险，参与前请充分了解项目情况。本项目收益预测基于当前市场情况，不构成任何投资建议或收益保证。',
        participantRecords: [],
        agreement: projectData.agreement || '本协议是参与者与项目方之间关于参与项目的约定。\n\n1. 参与者确认已充分了解项目情况和相关风险。\n\n2. 参与金额将用于项目开发、生产和运营。\n\n3. 项目收益将按约定方式和周期分配。\n\n4. 参与者有权获取项目进展和财务状况的定期报告。\n\n5. 项目方承诺合理使用资金，并尽最大努力实现预期目标。\n\n6. 如遇不可抗力因素导致项目无法继续，项目方将按剩余资金比例退还参与者。\n\n7. 本协议自参与确认之日起生效。'
      }

      // 加载参与记录
      loadParticipantRecords()

      // 加载用户余额
      loadUserBalance(projectData.currency)
    } else {
      showToast('项目不存在或加载失败')
      router.push('/home')
    }
  } catch (error) {
    console.error('加载项目数据失败:', error)
    showToast('加载项目数据失败')
    closeToast() // 确保出错时也清除加载提示
    router.push('/home')
  }
}

// 加载用户余额
const loadUserBalance = async (icon) => {
  try {
    // 如果用户未登录，直接返回0
    if (!isLoggedIn()) {
      userBalance.value = 0
      return
    }

    const res = await getUserWallet({icon:icon})
    if (res.code === 0 && res.data && res.data.length > 0) {
      userBalance.value = parseFloat(res.data[0].balance || 0)
    } else {
      userBalance.value = 0
    }
  } catch (error) {
    console.error('加载用户余额失败:', error)
    userBalance.value = 0
  }
}

// 加载参与记录
const loadParticipantRecords = async (isLoadMore = false) => {
  try {
    if (participantRecords.loading || (participantRecords.finished && isLoadMore)) {
      return
    }

    participantRecords.loading = true
    participantRecords.error = false

    const res = await getParticipantRecords({
      proId: route.params.id,
      all:1,
      page: participantRecords.page,
      size: participantRecords.size
    })

    if (res.code === 0 && res.data) {
      const { list, count } = res.data

      if (isLoadMore) {
        participantRecords.list = [...participantRecords.list, ...list]
      } else {
        participantRecords.list = list
      }

      participantRecords.total = count
      participantRecords.finished = participantRecords.list.length >= count

      // 更新项目的参与记录
      project.value.participantRecords = participantRecords.list

      // 如果是加载更多，增加页码
      if (isLoadMore) {
        participantRecords.page++
      }
    } else {
      participantRecords.error = true
    }
  } catch (error) {
    console.error('加载参与记录失败:', error)
    participantRecords.error = true
  } finally {
    participantRecords.loading = false
  }
}

// 加载更多记录
const loadMoreRecords = () => {
  if (!participantRecords.loading && !participantRecords.finished) {
    loadParticipantRecords(true)
  }
}

// 返回上一页
const goBack = () => {
  router.back()
}


// 显示参与弹窗
const showParticipatePopup = () => {
  showParticipate.value = true
}

// 显示协议
const showAgreement = () => {
  showAgreementPopup.value = true
}

// 使用全部余额
const useAllBalance = () => {
  participateAmount.value = userBalance.value.toString()
}

// 确认参与
const confirmParticipate = async () => {
  if (!canParticipate.value) {
    return
  }

  // 检查用户是否已登录
  if (!isLoggedIn()) {
    showToast('请先登录')
    return
  }

  try {
    const amount = parseFloat(participateAmount.value)

    // 调用参与项目接口
    const res = await joinProject({
      proId: project.value.id,
      amt: amount+""
    })

    if (res.code === 0) {
      showSuccessToast('参与成功',1000)
      showParticipate.value = false

      // 更新项目数据
      project.value.current = (parseFloat(project.value.current.replace(/,/g, '')) + amount).toLocaleString()
      project.value.participants += 1
      project.value.progress = Math.min(100, Math.round((parseFloat(project.value.current.replace(/,/g, '')) / parseFloat(project.value.target.replace(/,/g, ''))) * 100))

      // 更新用户余额
      userBalance.value -= amount

      // 重置表单
      participateAmount.value = ''
      agreeTerms.value = false

      // 重新加载参与记录
      participantRecords.page = 1
      participantRecords.finished = false
      loadParticipantRecords()
    }
  } catch (error) {
    console.error('参与项目失败:', error)
  } 
}


const formatAddress = (address) => {
  if (!address) return '';
  if (address.length <= 8) return address;
  
  // 显示前3位和后4位，中间用***替代
  return `${address.substring(0, 3)}***${address.substring(address.length - 4)}`;
}
</script>

<style scoped>
.project-detail-container {
  min-height: 100vh;
  background-color: #f8fafc;
  padding-bottom: 100px; /* 增加底部间距，确保内容不被底部操作栏遮挡 */
  padding-top: 60px; /* 添加顶部间距，避免内容被顶部导航栏遮挡 */
}

/* 顶部导航 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  max-width: 800px;
  margin: 0 auto;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  height: 60px; /* 明确定义导航栏高度 */
}

.header-content {
  max-width: var(--max-content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 16px;
}

.back-button,
.share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #334155;
  background: transparent;
  border: none;
  padding: 0;
}

.header-title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  text-align: center;
}

/* 项目基本信息 */
.project-info-card {
  margin: 16px;
  padding: 16px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.project-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 16px;
}

.project-progress-container {
  margin-bottom: 16px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.progress-label {
  font-size: 14px;
  color: #64748b;
}

.progress-value {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
}

.project-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.stats-item {
  text-align: center;
}

.stats-value {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 4px;
}

.stats-label {
  font-size: 12px;
  color: #64748b;
}

/* 项目图片轮播 */
.project-images {
  margin: 16px;
}

.image-swiper {
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
}

.swiper-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 标签页内容 */
.tab-content {
  padding: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 24px 0 16px;
}

.section-title:first-child {
  margin-top: 0;
}

/* 项目介绍 */
.project-description {
  font-size: 14px;
  color: #334155;
  line-height: 1.6;
}

/* 富文本内容样式 */
.rich-text-content {
  word-break: break-word;
  overflow-wrap: break-word;
  
  /* 清除默认样式并强制响应式 */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* 段落样式 */
  p {
    margin: 0 0 16px;
    line-height: 1.6;
    color: #334155;
  }
  
  /* 图片样式 - 强化响应式处理 */
  img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 16px auto;
    border-radius: 8px;
    display: block !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    object-fit: contain;
  }
  
  img:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }
  
  /* 针对可能的内联样式覆盖 */
  img[style*="width"] {
    width: auto !important;
    max-width: 100% !important;
  }
  
  img[style*="height"] {
    height: auto !important;
  }
  
  /* 标题样式 */
  h1, h2, h3, h4, h5, h6 {
    margin: 20px 0 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #1e293b;
  }
  
  h1 { font-size: 20px; border-bottom: 2px solid #2563eb; padding-bottom: 8px; }
  h2 { font-size: 18px; color: #334155; }
  h3 { font-size: 16px; color: #334155; }
  h4 { font-size: 15px; color: #334155; }
  h5 { font-size: 14px; color: #334155; }
  h6 { font-size: 13px; color: #334155; }
  
  /* 列表样式 */
  ul, ol {
    padding-left: 20px;
    margin: 12px 0;
  }
  
  li {
    margin-bottom: 6px;
    line-height: 1.5;
    color: #334155;
  }
  
  ul li {
    list-style-type: disc;
  }
  
  ol li {
    list-style-type: decimal;
  }
  
  /* 表格样式 */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
  }
  
  th {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    font-weight: 600;
    color: #1e293b;
    font-size: 13px;
  }
  
  tbody tr:hover {
    background-color: #f8fafc;
  }
  
  /* 引用样式 */
  blockquote {
    margin: 16px 0;
    padding: 16px 20px;
    border-left: 4px solid #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 0 8px 8px 0;
    color: #1e40af;
    font-style: italic;
    position: relative;
  }
  
  blockquote::before {
    content: '"';
    position: absolute;
    top: -5px;
    left: 15px;
    font-size: 40px;
    color: #2563eb;
    opacity: 0.3;
  }
  
  /* 链接样式 */
  a {
    color: #2563eb;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
    font-weight: 500;
  }
  
  a:hover {
    border-bottom-color: #2563eb;
    color: #1d4ed8;
  }
  
  /* 代码样式 */
  code {
    background-color: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #be123c;
  }
  
  pre {
    background-color: #f8fafc;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 16px 0;
    border: 1px solid #e2e8f0;
  }
  
  pre code {
    background: none;
    padding: 0;
    color: #334155;
  }
  
  /* 强调样式 */
  strong, b {
    font-weight: 600;
    color: #1e293b;
  }
  
  em, i {
    font-style: italic;
    color: #64748b;
  }
  
  /* 分隔线样式 */
  hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
    margin: 20px 0;
  }
  
  /* 删除线样式 */
  del, s {
    text-decoration: line-through;
    opacity: 0.7;
  }
  
  /* 下划线样式 */
  u {
    text-decoration: underline;
    text-decoration-color: #2563eb;
  }
  
  /* 小字体样式 */
  small {
    font-size: 12px;
    color: #64748b;
  }
  
  /* 标记样式 */
  mark {
    background-color: #fef3c7;
    padding: 2px 4px;
    border-radius: 3px;
  }
  
  /* 视频样式 */
  video {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    margin: 16px auto;
    display: block;
  }
  
  /* iframe样式 */
  iframe {
    max-width: 100% !important;
    border-radius: 8px;
    margin: 16px auto;
    display: block;
  }
  
  /* 响应式处理 */
  @media (max-width: 768px) {
    font-size: 13px;
    
    /* 移动端图片优化 */
    img {
      margin: 12px auto !important;
      border-radius: 6px !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
      /* 移动端禁用悬停效果 */
      transform: none !important;
    }
    
    img:hover {
      transform: none !important;
    }
    
    h1 { font-size: 18px; }
    h2 { font-size: 16px; }
    h3 { font-size: 15px; }
    h4 { font-size: 14px; }
    h5 { font-size: 13px; }
    h6 { font-size: 12px; }
    
    table {
      font-size: 12px;
      /* 移动端表格横向滚动 */
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }
    
    th, td {
      padding: 8px;
      min-width: 80px;
    }
    
    blockquote {
      padding: 12px 16px;
      margin: 12px 0;
    }
    
    pre {
      padding: 12px;
      margin: 12px 0;
      overflow-x: auto;
    }
    
    /* 视频和iframe移动端优化 */
    video, iframe {
      width: 100% !important;
      height: auto !important;
      max-height: 250px;
    }
  }
  
  /* 超小屏幕优化 */
  @media (max-width: 480px) {
    font-size: 12px;
    
    img {
      margin: 8px auto !important;
      border-radius: 4px !important;
    }
    
    h1 { font-size: 16px; }
    h2 { font-size: 15px; }
    h3 { font-size: 14px; }
    h4 { font-size: 13px; }
    h5 { font-size: 12px; }
    h6 { font-size: 11px; }
    
    blockquote {
      padding: 8px 12px;
      margin: 8px 0;
    }
    
    pre {
      padding: 8px;
      margin: 8px 0;
      font-size: 11px;
    }
    
    table {
      font-size: 10px;
    }
    
    th, td {
      padding: 6px;
      min-width: 60px;
    }
  }
}

.advantage-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.advantage-item {
  display: flex;
  align-items: flex-start;
}

.advantage-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  margin-right: 12px;
  flex-shrink: 0;
}

.advantage-content {
  flex: 1;
}

.advantage-title {
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 4px;
}

.advantage-desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
}

.roadmap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.roadmap-item {
  display: flex;
  align-items: flex-start;
}

.roadmap-date {
  width: 80px;
  font-size: 14px;
  font-weight: 500;
  color: #2563eb;
  flex-shrink: 0;
}

.roadmap-content {
  flex: 1;
  display: flex;
  align-items: flex-start;
}

.roadmap-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #2563eb;
  margin-right: 12px;
  margin-top: 4px;
  flex-shrink: 0;
}

.roadmap-info {
  flex: 1;
}

.roadmap-title {
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 4px;
}

.roadmap-desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
}

/* 投资回报 */
.returns-card {
  background-color: #f0f9ff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.returns-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.returns-label {
  font-size: 14px;
  color: #0369a1;
}

.returns-value {
  font-size: 20px;
  font-weight: 700;
  color: #0369a1;
}

.returns-details p {
  font-size: 14px;
  color: #0c4a6e;
  line-height: 1.6;
}

.distribution-item {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.distribution-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.distribution-label {
  font-size: 14px;
  color: #64748b;
}

.distribution-value {
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
}

.distribution-desc {
  font-size: 14px;
  color: #334155;
  line-height: 1.5;
}

.investment-example {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.example-card {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.example-header {
  background-color: #2563eb;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  padding: 12px;
  text-align: center;
}

.example-content {
  padding: 16px;
}

.example-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.example-item:last-child {
  margin-bottom: 0;
}

.example-label {
  font-size: 14px;
  color: #64748b;
}

.example-value {
  font-size: 14px;
  font-weight: 500;
  color: #2563eb;
}

/* 风险提示 */
.risk-list,
.measures-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.risk-item,
.measure-item {
  display: flex;
  align-items: flex-start;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.risk-icon,
.measure-icon {
  margin-right: 12px;
  flex-shrink: 0;
}

.risk-content,
.measure-content {
  flex: 1;
}

.risk-title,
.measure-title {
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 4px;
}

.risk-desc,
.measure-desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
}

.risk-disclaimer {
  background-color: #fff1f2;
  border-radius: 8px;
  padding: 16px;
}

.disclaimer-title {
  font-size: 16px;
  font-weight: 600;
  color: #be123c;
  margin-bottom: 8px;
}

.disclaimer-content {
  font-size: 14px;
  color: #9f1239;
  line-height: 1.6;
}

/* 参与记录 */
.participants-list {
  display: flex;
  flex-direction: column;
}

.participant-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #e2e8f0;
}

.participant-item:last-child {
  border-bottom: none;
}

.participant-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;
}

.participant-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.participant-info {
  flex: 1;
}

.participant-name {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 4px;
}

.participant-time {
  font-size: 12px;
  color: #64748b;
}

.participant-amount {
  font-size: 16px;
  font-weight: 600;
  color: #2563eb;
}

/* 加载更多状态 */
.load-more-status {
  text-align: center;
  padding: 16px 0;
  font-size: 14px;
}

.loading-text {
  color: #64748b;
}

.error-text {
  color: #ef4444;
  cursor: pointer;
}

.finished-text {
  color: #64748b;
}

.more-text {
  color: #2563eb;
  cursor: pointer;
}

/* 底部操作栏 */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 800px;
  margin: 0 auto;
  background-color: #ffffff;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
  z-index: 100;
  /* 确保在其他内容之上 */
}

.action-bar-content {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
}

.action-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.min-amount {
  font-size: 14px;
  color: #64748b;
}

.min-amount span {
  font-weight: 500;
  color: #2563eb;
}

.deadline {
  font-size: 14px;
  color: #64748b;
}

.participate-button {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  height: 44px !important;
  /* 增加按钮高度，提高可点击区域 */
  font-size: 16px !important;
  /* 增加字体大小 */
}

/* 参与弹窗 */
.participate-popup {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.popup-header {
  padding: 16px;
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
}

.popup-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.popup-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.project-brief {
  background-color: #f8fafc;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.brief-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.brief-info {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #64748b;
}

.amount-input {
  margin-bottom: 24px;
}

.input-label {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 8px;
}

.input-container {
  margin-bottom: 8px;
}

.balance-info {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #64748b;
}

.all-in {
  color: #2563eb;
  cursor: pointer;
}

.agreement-check {
  font-size: 14px;
  color: #64748b;
}

.agreement-link {
  color: #2563eb;
  cursor: pointer;
}

.popup-footer {
  padding: 16px;
  border-top: 1px solid #e2e8f0;
}

.confirm-button {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
}

/* 协议弹窗 */
.agreement-popup {
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.agreement-header {
  text-align: center;
  margin-bottom: 16px;
}

.agreement-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.agreement-content {
  flex: 1;
  overflow-y: auto;
  font-size: 14px;
  color: #334155;
  line-height: 1.8;
  white-space: pre-line;
}
</style>
